import React, { useState } from 'react';
import { 
  Box, 
  Typography, 
  Button, 
  Paper, 
  Divider, 
  Grid, 
  Card, 
  CardContent,
  Stack,
  IconButton
} from '@mui/material';
import { ArrowBack as ArrowBackIcon } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';

function TrayCasePage() {
  const navigate = useNavigate();
  const [windowStatus, setWindowStatus] = useState('可见');

  const hideWindow = () => {
    // 调用窗口隐藏API (不会实际操作，这里只是模拟状态)
    setWindowStatus('已隐藏');
  };

  return (
    <Box sx={{ p: 3 }}>
      <Stack direction="row" alignItems="center" spacing={2} sx={{ mb: 3 }}>
        <IconButton 
          onClick={() => navigate('/')}
          sx={{ color: 'text.primary' }}
        >
          <ArrowBackIcon />
        </IconButton>
        <Typography variant="h4" component="h1">
          系统托盘
        </Typography>
      </Stack>

      <Paper elevation={3} sx={{ p: 3, mb: 3 }}>
        <Typography variant="h6" gutterBottom>
          Tauri 系统托盘功能
        </Typography>
        <Typography variant="body2" color="text.secondary" paragraph>
          本示例展示了如何使用 Tauri 实现系统托盘功能。在应用程序中，系统托盘图标可以让应用在后台运行并提供快速访问功能。
        </Typography>

        <Box sx={{ mb: 3 }}>
          <Grid container spacing={2}>
            <Grid item xs={12} sm={6}>
              <Button
                variant="contained"
                color="primary"
                onClick={hideWindow}
                fullWidth
              >
                隐藏窗口
              </Button>
            </Grid>
          </Grid>
        </Box>

        <Box sx={{ my: 2 }}>
          <Typography variant="subtitle1" gutterBottom>
            当前窗口状态：{windowStatus}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            点击隐藏按钮将隐藏窗口，但应用程序继续在后台运行。您可以通过系统托盘图标重新显示窗口。
          </Typography>
        </Box>

        <Divider sx={{ my: 2 }} />

        <Typography variant="h6" gutterBottom>
          系统托盘功能说明
        </Typography>
        <Grid container spacing={3}>
          <Grid item xs={12} md={6}>
            <Card variant="outlined">
              <CardContent>
                <Typography variant="subtitle1" gutterBottom>
                  左键点击托盘图标
                </Typography>
                <Typography variant="body2">
                  切换窗口的显示/隐藏状态。如果窗口当前可见，将会隐藏；如果窗口当前隐藏，将会显示。
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} md={6}>
            <Card variant="outlined">
              <CardContent>
                <Typography variant="subtitle1" gutterBottom>
                  右键点击托盘图标
                </Typography>
                <Typography variant="body2">
                  打开托盘菜单，提供"显示窗口"、"隐藏窗口"和"退出"三个选项。
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} md={6}>
            <Card variant="outlined">
              <CardContent>
                <Typography variant="subtitle1" gutterBottom>
                  双击托盘图标
                </Typography>
                <Typography variant="body2">
                  直接显示主窗口，无论当前窗口是否可见。
                </Typography>
              </CardContent>
            </Card>
          </Grid>
          <Grid item xs={12} md={6}>
            <Card variant="outlined">
              <CardContent>
                <Typography variant="subtitle1" gutterBottom>
                  关闭主窗口
                </Typography>
                <Typography variant="body2">
                  点击主窗口的关闭按钮不会退出应用程序，而是将窗口隐藏，应用程序继续在后台运行。
                </Typography>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Paper>

      <Paper elevation={3} sx={{ p: 3 }}>
        <Typography variant="h6" gutterBottom>
          实现细节
        </Typography>
        <Typography variant="body2" paragraph>
          本示例在 Rust 端实现了系统托盘功能，主要包括：
        </Typography>
        <Box component="ul" sx={{ pl: 2 }}>
          <li>
            <Typography variant="body2">创建系统托盘菜单和图标</Typography>
          </li>
          <li>
            <Typography variant="body2">处理托盘菜单项点击事件</Typography>
          </li>
          <li>
            <Typography variant="body2">处理托盘图标的鼠标事件（点击、双击、右键点击）</Typography>
          </li>
          <li>
            <Typography variant="body2">设置窗口关闭时的行为（隐藏而不是退出）</Typography>
          </li>
        </Box>
        <Box sx={{ mt: 2 }}>
          <Typography variant="body2" color="text.secondary">
            系统托盘功能完全在 Rust 后端实现，不依赖于前端 JavaScript 代码。
          </Typography>
        </Box>
      </Paper>
    </Box>
  );
}

export default TrayCasePage; 